<template>
  <div>
  <el-form ref="ruleForm" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">班组管理</div>
        </div>
        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">单位信息</div>
          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <div>单位名称</div>
                  <el-select
                    :disabled="true"
                    v-model="ruleForm.company_id"
                    @change="sechange()"
                   placeholder="请选择"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.company_id"
                      :label="item.company_name"
                      :value="item.company_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col> 
               <el-col :span="6">
                <el-form-item label="统一信用代码">
                  <el-input
                    v-model="ruleForm.buildCompany.company_code"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>单位类型</div>
                  <el-select
                    v-model="ruleForm.buildCompany.buildCompanyType.company_type_id"
                    :disabled="true"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.buildCompanyType.company_type_id"
                      :label="item.buildCompanyType.company_type_name"
                      :value="item.buildCompanyType.company_type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="l-addrygl-2-a">
          <div class="l-addrygl-2-1">项目班组信息</div>
          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <el-row>
              <el-col :span="6">
                <el-form-item label="班组名称" prop="group_name">
                  <el-input v-model="ruleForm.group_name"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item prop="group_start">
                  <span>入场时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy MM dd"
                      v-model="ruleForm.group_start"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="group_end">
                  <span>离场时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy MM dd"
                      v-model="ruleForm.group_end"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
          </el-row>
     </div>
        </div>
        <!-- r人员信息 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-2-1">人员管理</div>
          <!-- 分页 -->

          <el-table
            ref="singleTable"
            :data="currList"
            highlight-current-row
            @current-change="handleCurrentChange"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 100%"
          >
            <el-table-column align="center" type="index" width="50">
            </el-table-column>
            <el-table-column
              align="center"
              property="people_name"
              label="姓名"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="buildJob.job_name"
              label="工种"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="buildGroup.group_start"
              label="入场时间"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="buildGroup.group_end"
              label="离场时间"
            >
            </el-table-column>
            <el-table-column property="do" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="del(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="f-fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="tableData.length"
              :page-size="pageSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
        <div class="l-addrygl-3">
          <div class="l-addrygl-2-1">材料管理</div>
           <div class="l-chuan">
             <div class="l-shangchuan">
            <el-upload
              action="api/pic/load"
              :headers="userToken"
              :on-success="handleSuccess"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :show-file-list="false"
            >
             <!-- :on-preview="handlePreview"
              :on-remove="handleRemove" -->
              <!-- :before-remove="beforeRemove" -->
        <el-button type="submit" class="clicksub" size="medium">
                上传
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
            </el-upload>
            </div>
            </div>
            <div class="group-chuan">
         <el-table
              border
              ref="singleTable"
              :data="tableDatachuan"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
              overflow:scoll
            >
              <el-table-column align="center" label="电子件名称">
                <template>
                  <span>劳务合同</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="name" label="电子件列表（点击查看）" show-overflow-tooltip>
                <!-- <template slot-scope="scope">
                  <a :href="scope.row.name" target="_blank" class="buttonText">{{scope.row.name}}</a>
                </template> -->
              </el-table-column>
              <el-table-column prop="do" label="操作" align="center">
                <!-- <el-button type="submit" @click="del(scope.$index, scope.row)" >删除</el-button> -->
                <template slot-scope="scope">
                  <el-button type="submit" @click="dellao(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            </div>
          <div class="f-fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="tableData.length"
              :page-size="pageSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      <div class="l-addrygl-5">
        <div class="l-tijiao">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </div>
      </div>
    
    </el-form>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      userToken: {}, //usertoken的值
      pageSize: 5,
      tableData: [], //总条数
       tableDatachuan: [
        {
          date: "2016-05-02",
          name: "",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      newfile:{},
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      currentRow: null,
      linput1: [], //第一行input框
      options: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      ruleForm: this.$route.params,
      //   ruleForm: {
      //    },
    };
  },
  methods: {
        // 成功
    handleSuccess(res, file, fileList) {
      console.log("文件", res);
           this.newfile=file
      // this.tableData.buildPeopleMaterial = res;
      // this.file=res.name
      this.tableDatachuan[0] = res;
      
      // console.log("table",  this.tableData[0]);
      // //  console.log("name", this.tableData.buildPeopleMaterial.name);
      // this.$notify.success({
      //   title: "成功",
      //   message: `文件上传成功`,
      // });
    },
        handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 编辑提交
    submitForm(){
      console.log('ruleform',this.ruleForm)
 this.ruleForm.people_material_url=this.newfile.name;
 this.ruleForm.people_material_name='班组安全手册'
// {
// 	"group_name": "测试班",
// 	"group_id": "20",
// 	"group_start": "2020-09-18",
// 	"group_end": "2021-01-01",
// 	"people_id": "9",
// 	"company_id": "2",
// 	"peopleIds": [
// 		88,
// 		98
// 	]
// }
  // {
  //       people_id: this.$route.params.people_id,
  //       group_id: "0",
  //     }
  let arr=[]
 this.ruleForm.peopleIds=arr
  // "peopleIds": [
	// 	88,
	// 	98
	// ]
     http
      .ryglxmbz3edit(this.ruleForm)
      .then((res) => {
        console.log('项目班组编辑',res.data);
      });
 },
        sechange(){
    for (let i = 0; i < this.linput1.length; i++) {
       if(this.ruleForm.company_id===this.linput1[i].company_id){
       this.ruleForm.buildCompany.company_code=this.linput1[i].company_code;
    this.ruleForm.buildCompany.buildCompanyType.company_type_id=this.linput1[i].buildCompanyType.company_type_id;
    }
  }
      
  //     for (let i = 0; i < this.linput1.length; i++) {
  //      if(this.ruleForm.buildCompany.company_id===this.linput1[i].company_id){
  //      this.ruleForm.buildCompany.company_code=this.linput1[i].company_code;
  //   this.ruleForm.buildCompany.buildCompanyType.company_type_id=this.linput1[i].buildCompanyType.company_type_id;
  //   }
  // }
 
 // console.log(this.linput1.company_code)
  
    },
    
    // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      console.log();
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },

    // 人员管理的表格的删除
    del(index, row) {
       let obj={
          group_id: "0",
          people_id:row.people_id
       }
    let objid={
        
    }
    objid.group_id=this.ruleForm.group_id;

     console.log('aaa',obj)
        http
        .ryglxmbzdel(obj)
        .then((r) => {
          http.ryglxmbzRen(objid).then((r) => {
            this.tableData = r.data;
            this.setCurrList(this.currPage);
            console.log("项目班组的人员管理", r.data);
          });
          // console.log("项目班组的人员管理删除", r);
        });
    },
    // 表格
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    back() {
      this.$router.push({
        name: "项目班组",
      });
    },
  },
  mounted() {
     this.userToken.userToken = sessionStorage.getItem("userToken");
    console.log("这是token", this.userToken);
    // this.sechange();
    console.log('this.ruleForm',this.ruleForm)
    let objid={
     }
    objid.group_id=this.ruleForm.group_id;
    console.log("objid",objid);
    http.ryglxmbzRen(objid).then((r) => {
      this.tableData = r.data;
      this.setCurrList(1);
      console.log("项目班组的人员管理表格", r.data);
   
    });
    console.log(this.ruleForm)

    // http.ryglxmbz3(this.ruleForm).then(r=>{
    //    console.log('编辑信息',r.data);
    // })

    // 第一行input框
    http.xmbzsearch({}).then((res) => {
      this.linput1 = res.data;
      console.log("单位名称", res.data);
    });
  },
};
</script>
<style scoped>
.l-chuan{
  width: 100%;
  height:15px;
  /* background: royalblue; */
  /* float: right; */
  /* position: absolute;
  right: 0; */
}
.l-shangchuan{
  float: right;
  margin-right: 2%;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 1150px;
  height: 80px;
  margin-top: -2px; */
  /* margin-top: 10px; */
  /* background: blanchedalmond; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  /* width: 1150px; */
  height: 90px;

  /* border: 1px solid gray; */
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 100%;
  height: 180px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-a{
  width: 100%;
  height: 180px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-3 {
  width: 100%;
  height: 250px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-5 {
 font-size: 17px;
  color: #787878;
  width: 100%;
  height: 87px;
  padding-top: 25px;
  /* margin-top: 5px; */
  background: white;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  float: right;
}
.f-fenye {
  float: right;
  margin-top: 15px;
}
</style>